<template>
	<view class="lease">
		<view class="lease-continue" v-if="!showNextPage">
			<checkbox-group class="list" @change="checkboxChange">
				<label class="list-item" v-for="(item, index) in deviceList" :key="index">
					<view class="list-item-con flex-center">
						<image
							class="list-item-con-img"
							:src="item.base.image"
							mode="aspectFill">
						</image>
						<view class="list-item-con-right">
							<view class="name text-overflow-one">{{item.base.name}}</view>
							<view class="type">序列号:{{item.base.number}}</view>
							<view class="daterange">使用时间:{{item.base.use_time}}</view>
							<view class="price">租赁价格:
								<text class="color-important">¥{{item.base.total}}</text>
							</view>
						</view>
					</view>
					<checkbox
						class="list-item-checkbox"
						:value="item.item_id"
						:checked="item.checked"
					/>
				</label>
			</checkbox-group>
			<view v-if="!deviceList.length" class="no-data">
				<image class="no-data-img" src="../../static/images/no-data.png" mode="aspectFit"></image>
				无可续费设备数据
			</view>
			<view v-if="deviceList.length" class="end-line">— 我是有底线的 —</view>
			<view v-if="deviceList.length" class="btns flex-center-between">
				<checkbox-group class="check-all" @change="checkboxAllChange">
					<!-- <label>
						<checkbox value="1" :checked="checkAll" />全选
					</label> -->
				</checkbox-group>
				<view class="btn" @click="continueLeasing()">续租</view>
			</view>
		</view>
		<view class="lease-pay" v-else>
			<view class="device-list">
				<view
					class="device-list-item">
					<view class="device-list-item-info flex-center">
						<image
							class="device-list-item-info-img"
							:src="selectDevice.base.image"
							mode="aspectFill">
						</image>
						<view class="device-list-item-info-right">
							<view class="name text-overflow-one">{{selectDevice.base.name}}</view>
							<view class="type">序列号:{{selectDevice.base.number}}</view>
							<view class="daterange">使用时间:{{selectDevice.base.use_time}}</view>
							<view class="price">租赁价格:
								<text class="color-important">{{selectDevice.base.total}}</text>
							</view>
						</view>
					</view>
					<view class="select-goods-number flex-center-between">
						<text>购买数量</text>
						<!-- <view @click="changeNum(index)"> -->
							<uni-number-box
								min="1"
								:max="selectDevice.goodsMaxNum"
								:value="selectDevice.goodsNum"
								@change="changeNum">
							</uni-number-box>
						<!-- </view> -->
					</view>
					<view class="device-list-item-package">
						<view class="device-list-item-package-tit">套餐</view>
						<text
							v-for="(item2, index2) in selectDevice.product.spec_name" :key="index2"
							:class="item2 === selectDevice.spec_name ? 'select-type-item type-actived': 'select-type-item'"
							@click="selectType(index, item2, index2)">
							<text v-for="(item3, index3) in selectDevice.product.spec_price" :key="index3">
								<text v-if="index2 === index3">
									{{'¥'+item3+ '/'}}
								</text>
							</text>
							{{item2}}
						</text>
					</view>
					<view class="device-list-item-price flex-center-between">
						<view class="price">
							<view>
								<text>维护费：{{selectDevice.product.upkeep}}</text>
								<text class="color-important"></text>
							</view>
							<view>
								<text>租赁费：{{selectDevice.spec_price}}</text>
								<text class="color-important"></text>
							</view>
						</view>
						<text>
							<text>小计：</text>
							<text class="color-important">¥{{totalMoney}}</text>
							<!-- selectDevice.total -->
						</text>
					</view>
					<!-- <uni-icon class="device-list-item-close" type="closeempty" size="30" color="#999"></uni-icon> -->
				</view>
			</view>
			
			<view class="select-address flex-center-between" @click="pageTo('/pages/index/address')">
				<image class="select-address-img" src="../../static/images/order-location.png" mode="aspectFill"></image>
				<view class="select-address-info" v-if="Object.keys(addressData).length !== 0">
					<view>
						<text class="select-address-info-name">{{addressData.addressName}}</text>
						<text class="select-address-info-mobile">{{addressData.addressPhone}}</text>
					</view>
					<view class="select-address-info-address text-overflow-two">
						{{addressData.addressArea}}
					</view>
				</view>
				<view class="select-address-info" v-if="Object.keys(addressData).length === 0">
					请选择收货地址
				</view>
				<uni-icon type="arrowright" color="#999" size="20"></uni-icon>
			</view>
			
			<view class="pay-select">
				<!-- <view class="pay-select-item flex-center-between" @click="certificationOrNot('invoice')">
					<text>是否开具发票</text>
					<view class="invoice">
						<text>
							{{invoiceData.invoiceId === 0 ? '否' : (invoiceData.invoiceTpye+'('+invoiceData.invoiceObject+')')}}
						</text>
						<uni-icon type="arrowright" color="#999" size="20"></uni-icon>
					</view>
				</view> -->
				<view class="pay-select-item flex-center-between" @click="certificationOrNot('contract')">
					<text>是否签订合同</text>
					<view class="flex-center">
						<view class="contract text-overflow-one">
							{{contractData.contractId === 0 ? '否' : contractData.contractPartyA}}
						</view>
						<uni-icon type="arrowright" color="#999" size="20"></uni-icon>
					</view>
				</view>
			</view>
			
			<view class="submit flex-center-between">
				<view class="total-money">
					总计
					<text class="color-important">￥{{totalMoney}}</text>
				</view>
				<view class="btn" @click="submitOrder">充值</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon.vue"
	import uniNumberBox from "@/components/uni-number-box.vue"
	export default {
		components: {
			uniIcon,
			uniNumberBox
		},
		data() {
			return {
				showNextPage: false,
				deviceList: [],
				checkAll: false,
				deviceSelectedList: [],
				typeActived: 0,
				addressData: {},
				contractData: { contractId: 0 },
				invoiceData: { invoiceId: 0 },
				isCertification: true,
				orderMoney: 0,
				num: 1,
				selectDevice: {},
			}
		},
		onLoad() {
			this.gatDeviceList()
			uni.removeStorageSync('CONTRACT')
			uni.removeStorageSync('INVOICE')
		},
		onShow() {
			this.getSelectedAddress()
			this.getInvoiceData()
			this.getContractData()
		},
		computed: {
			/**
			 * 计算总金额
			 */
			totalMoney: function() {
				return this.selectDevice.goodsNum* this.selectDevice.total;
			}
		},
		methods: {
			/**
			 * 获取设备列表数据
			 */
			async gatDeviceList() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/order/renewal',
					data: { page: 1, row: 99 }
				})
				if (res.status === 1) {
					this.deviceList = res.data.list.map(item => {
						item.base.image = this.$baseUrl + item.base.image
						item.checked = false
						return item
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 提交
			 */
			async submitOrder() {
				console.log('this.deviceSelectedList',this.deviceSelectedList)
				let products = this.deviceSelectedList
				let order_no = this.deviceSelectedList[0].base.order_no
				products.map(item=>{
					// item.order_no = item.base.order_no
					item.pro_id = item.product.id
					item.quantity = item.goodsNum
					item.spec_id = item.product.spec_name.findIndex(value=> value === item.spec_name)
					delete item.base
					delete item.product
					delete item.checked
					delete item.item_id
					delete item.goodsMaxNum
					delete item.goodsNum
					delete item.spec_name
					delete item.spec_price
					delete item.total
					return item
				})
				console.log('addressData',products)
				let res = await this.$http.request({
					method: 'post',
					url: '/api/order/submit',
					data: {
						products: products,
						address_id: this.addressData.addressId,
						invoice_id: this.invoiceData.invoiceId,
						contract_id: this.contractData.contractId,
						coupon_id: 0,
						recommend: 0,
						renew: order_no
					}
				})
				if (res.status === 1) {
					this.pageTo('/pages/index/pay?orderNum='+res.data.order_no+'&orderMoney='+this.totalMoney)
					this.showNextPage = false
					this.orderMoney = 0
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 单选
			 * @param {Object} e
			 */
			checkboxChange(e) {
				let checkedArr = e.detail.value
				if(checkedArr.length > 1){
					checkedArr.shift()
				}
				
				this.deviceList = this.deviceList.map(item => {
					if(checkedArr.map(Number).includes(Number(item.item_id))){
						item.checked = true
					} else {
						item.checked = false
					}
					return item
				})
				// this.checkAll = this.deviceList.every(item => {
				// 	return item.checked === true
				// })
				// if(this.checkAll) {
				// 	this.deviceList = this.deviceList.map(item => {
				// 		item.checked = this.checkAll
				// 		return item
				// 	})
				// }
			},
			/**
			 * 全选
			 * @param {Object} e
			 */
			checkboxAllChange(e) {
				// console.log(e.detail.value)
				this.checkAll = e.detail.value.length > 0 ? true : false
				this.deviceList = this.deviceList.map(item => {
					item.checked = this.checkAll
					return item
				})
			},
			/**
			 * 续租
			 */
			continueLeasing() {
				if (this.deviceList.every(item => item.checked === false)) {
					uni.showToast({
						title: '请选择设备',
						icon: 'none'
					});
					return
				}
				this.deviceSelectedList = this.deviceList.filter(item => item.checked == true)
				this.showNextPage = true
				this.deviceSelectedList = this.deviceSelectedList.map(item => {
					return {
						...item,
						goodsNum: 1,
						goodsMaxNum: 100,
						spec_price: item.product.spec_price[0],
						spec_name: item.product.spec_name[0],
						total: parseFloat(item.product.spec_price[0]) + parseFloat(item.product.upkeep)
					}
				})
				this.selectDevice = this.deviceSelectedList[0];
				// this.deviceSelectedList.forEach(item => {
				// 	this.orderMoney = this.orderMoney + item.total
				// })
				console.log(this.selectDevice)
			},
			/**
			 * 更改商品数量
			 * @param {Number} index
			 */
			changeNum(index) {
				this.selectDevice.goodsNum = index
				// this.calculateMoney(index)
			},
			/**
			 * 切换商品种类
			 * @param {Number} index
			 * @param {Object} item2
			 * @param {Number} index2
			 */
			selectType(index, item2, index2){
				// console.log(index, item2, index2)
				this.deviceSelectedList[index].spec_name = item2
				this.deviceSelectedList[index].spec_price = this.deviceSelectedList[index].product.spec_price[index2]
				this.calculateMoney(index)
			},
			/**
			 * 计算价格
			 * @param {Number} index
			 */
			calculateMoney(index) {
				let num = this.deviceSelectedList[index].goodsNum
				let price = parseFloat(this.deviceSelectedList[index].spec_price)
				let serviceFee = parseFloat(this.deviceSelectedList[index].product.upkeep)
				this.deviceSelectedList[index].total = (serviceFee + price) * num
				this.orderMoney = 0
				this.deviceSelectedList.forEach(item => {
					this.orderMoney = this.orderMoney + item.total
				})
			},
			/**
			 * 获取地址数据
			 */
			getSelectedAddress() {
				uni.getStorage({
					key: 'ADDRESS',
					success: res => {
						this.addressData = res.data
					},
					fail: res => {
						this.addressData = {};
					}
				})
			},
			/**
			 * 获取合同数据
			 */
			getContractData() {
				try {
					const value = uni.getStorageSync('CONTRACT');
					if (value) {
						this.contractData = value
					}
				} catch (e) {
					// error
				}
			},
			/**
			 * 获取发票数据
			 */
			getInvoiceData() {
				try {
					const value = uni.getStorageSync('INVOICE');
					if (value) {
						this.invoiceData = value
					}
				} catch (e) {
					// error
				}
			},
			/**
			 * 企业认证
			 * @param {String} page
			 */
			certificationOrNot(page) {
				if (this.isCertification) {
					this.pageTo('/pages/index/'+page)
				} else{
					uni.showModal({
						title: '企业认证',
						content: '您未通过企业实名认证，认证成功后即可进行开票和签订合同功能',
						cancelText: '暂不认证',
						confirmText: '立即认证',
						success: (res) => {
							if (res.confirm) {
								this.pageTo('/pages/user/userCertification')
							}
						}
					});
				}
			},
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			},
			
		}
	}
</script>

<style lang="scss">
	.lease-continue{
		height: 100%;
		.list{
			padding-top: 20rpx;
			&-item{
				display: block;
				box-sizing: border-box;
				width: 750rpx;
				padding: 0 40rpx;
				margin-bottom: 20rpx;
				background: $uni-bg-color;
				position: relative;
				&-con{
					height: 240rpx;
					&-img{
						height: 180rpx;
						width: 180rpx;
					}
					&-right{
						margin-left: 20rpx;
						.name{
							width: 400rpx;
						}
						.type,
						.daterange,
						.price{
							font-size: $uni-font-size-sm2;
							color: $uni-text-color-grey;
						}
					}
				}
				&-checkbox{
					position: absolute;
					top: 30rpx;
					right: 30rpx;
				}
			}
		}
		.btns{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 106rpx;
			width: 100%;
			background: $uni-bg-color;
			.check-all{
				margin-left: 30rpx;
			}
			.btn{
				width: 238rpx;
				line-height: 106rpx;
				text-align: center;
				color: $uni-text-color-inverse;
				background: $uni-color-theme;
			}
		}
	}
	.lease-pay{
		.device-list{
			padding-top: 30rpx;
			&-item{
				margin: 0 30rpx 30rpx;
				background: $uni-bg-color;
				border-radius: $uni-border-radius-base;
				position: relative;
				&-info{
					box-sizing: border-box;
					padding: 30rpx 20rpx;
					height: 240rpx;
					&-img{
						height: 180rpx;
						width: 180rpx;
					}
					&-right{
						margin-left: 20rpx;
						.name{
							width: 400rpx;
						}
						.type,
						.daterange,
						.price{
							font-size: $uni-font-size-sm2;
							color: $uni-text-color-grey;
						}
					}
				}
				.select-goods-number{
					margin: 20rpx;
				}
				&-package{
					padding: 20rpx;
					&-tit{}
					.select-type-item{
						display: inline-block;
						height: 76rpx;
						line-height: 76rpx;
						background: $uni-bg-color-grey;
						padding: 0 30rpx;
						margin: 20rpx 30rpx 0 0;
						font-size: $uni-font-size-sm2;
						border-radius: $uni-border-radius-base;
					}
					.type-actived{
						background: $uni-color-theme;
						color: $uni-text-color-inverse;
					}
				}
				&-address{
					padding: 20rpx;
					&-con{
						font-size: $uni-font-size-sm2;
					}
				}
				&-price{
					padding: 20rpx;
					.price{
						font-size: $uni-font-size-sm2;
					}
				}
				&-close{
					position: absolute;
					top: 10rpx;
					right: 10rpx;
				}
			}
		}
		
		.select-address{
			box-sizing: border-box;
			width: 690rpx;
			margin: 20rpx 30rpx;
			padding: 20rpx;
			background: $uni-bg-color;
			border-radius: $uni-border-radius-base;
			&-info{
				margin: 0 30rpx;
				width: 450rpx;
				&-mobile{
					margin-left: 20rpx;
					color: $uni-text-color-grey;
					font-size: $uni-font-size-sm2;
				}
				&-address{
					width: 450rpx;
					font-size: $uni-font-size-sm2;
				}
			}
			&-img{
				height: 68rpx;
				width: 68rpx;
				border-radius: 50%;
			}
		}
		
		.pay-select{
			margin: 20rpx 30rpx;
			padding: 0 30rpx;
			background: $uni-bg-color;
			border-radius: $uni-border-radius-base;
			&-item{
				height: 110rpx;
				border-bottom: 1rpx solid $uni-border-color;
				&:last-child{
					border-bottom: none;
				}
				.contract{
					width: 240rpx;
					text-align: right;
				}
			}
		}
		
		.submit{
			height: 106rpx;
			background: $uni-bg-color;
			.total-money{
				padding-left: 40rpx;
				.color-important{
					font-size: 44rpx;
				}
			}
			.btn{
				width: 238rpx;
				line-height: 106rpx;
				color: $uni-text-color-inverse;
				text-align: center;
				background: $uni-color-theme;
			}
		}
	}
</style>
